import React from 'react';
import * as bumbag from 'bumbag';

import SEO from '../components/SEO';
import Header from '../components/Header';
import DocsSidebar from '../components/Docs/Sidebar';
import NativeSidebar from '../components/Native/Sidebar';
import Footer from '../components/Footer';
import _TableOfContents from '../components/TableOfContents';

const Sidebars = {
  web: DocsSidebar,
  native: NativeSidebar,
};

const TableOfContents = bumbag.styled(_TableOfContents)`
  position: fixed;
  top: 100px;
  right: 2rem;
  overflow: auto;
  max-height: calc(100vh - 200px);
  width: 300px;
  border-left: 1px solid ${bumbag.palette('white800')};
  padding-left: 1rem;
`;

export default function Docs(props) {
  const { children, frontmatter = {}, platform = 'web', path = '', toc } = props;

  //////////////////////////////////////////////////////////////////////

  const title = props.title || frontmatter?.seoTitle || frontmatter?.title;
  const breakpoint = props.breakpoint || frontmatter?.breakpoint || 'tablet';
  const isFluid = props.isFluid || frontmatter?.isFluid;

  //////////////////////////////////////////////////////////////////////

  const Sidebar = Sidebars[platform];

  return (
    <React.Fragment>
      <SEO title={title} />
      <bumbag.PageWithHeader sticky header={<Header />}>
        <bumbag.PageWithSidebar
          sidebar={<Sidebar path={path} />}
          sidebarPlacement="left"
          sidebarWidth="270px"
          overrides={{
            PageWithSidebar: {
              Content: {
                styles: {
                  base: (props) => bumbag.css`
                    ${bumbag.breakpoint(
                      'max-fullHD',
                      bumbag.css`
                      padding-right: 0px;
                    `,
                      {
                        else: bumbag.css`
                          padding-right: calc(300px + 2rem);
                        `,
                      }
                    )(props)}
                  `,
                },
              },
            },
          }}
        >
          <bumbag.PageContent
            align="center"
            display="flex"
            isLayout={isFluid}
            isFluid={isFluid}
            breakpoint={breakpoint}
            use="main"
            id="main-content"
          >
            <bumbag.Box width="100%">{children}</bumbag.Box>
            <bumbag.Hide below="fullHD">{toc && <TableOfContents breakpoint={breakpoint} toc={toc} />}</bumbag.Hide>
          </bumbag.PageContent>
          <bumbag.PageContent>
            <Footer />
          </bumbag.PageContent>
        </bumbag.PageWithSidebar>
      </bumbag.PageWithHeader>
    </React.Fragment>
  );
}
